import Skeleton, { SkeletonTheme } from "react-loading-skeleton"; import "react-loading-skeleton/dist/skeleton.css"; import { ClockIcon, HeartIcon } from "@heroicons/react/20/solid"; import { TvIcon, ArrowTrendingUpIcon, RectangleStackIcon, } from "@heroicons/react/24/outline"; import Head from "next/head"; import Image from "next/image"; import { useRouter } from "next/router"; import { useEffect, useState } from "react"; import Layout from "../../components/layout"; import Link from "next/link"; import Content from "../../components/hero/content"; import Modal from "../../components/modal"; import { signIn, useSession } from "next-auth/react"; import AniList from "../../components/media/aniList"; import ListEditor from "../../components/listEditor"; const query = ` query ($username: String, $status: MediaListStatus) { MediaListCollection(userName: $username, type: ANIME, status: $status, sort: SCORE_DESC) { user { id name about (asHtml: true) createdAt avatar { large } statistics { anime { count episodesWatched meanScore minutesWatched } } bannerImage mediaListOptions { animeList { sectionOrder } } } lists { status name entries { id mediaId status progress score media { id status title { english romaji } episodes coverImage { large } } } } } } `; const infoQuery = `query ($id: Int) { Media(id: $id) { id type title { romaji english native } coverImage { extraLarge large color } bannerImage description episodes nextAiringEpisode { episode airingAt } averageScore popularity status startDate { year } duration genres relations { edges { relationType node { id type status title { romaji english userPreferred } coverImage { extraLarge large color } } } } recommendations { nodes { mediaRecommendation { id title { romaji } coverImage { extraLarge large } } } } } }`; export default function Info({ info, color }) { const { data: session } = useSession(); const [episode, setEpisode] = useState(null); const [loading, setLoading] = useState(false); const [progress, setProgress] = useState(0); const [statuses, setStatuses] = useState(null); const [domainUrl, setDomainUrl] = useState(""); const [showAll, setShowAll] = useState(false); const [open, setOpen] = useState(false); const [time, setTime] = useState(0); const { id } = useRouter().query; const rec = info?.recommendations?.nodes.map( (data) => data.mediaRecommendation ); useEffect(() => { const { protocol, host } = window.location; const url = `${protocol}//${host}`; setDomainUrl(url); async function fetchData() { setLoading(true); if (id) { try { setEpisode(null) const res = await fetch(`https://api.moopa.my.id/meta/anilist/info/${info.id}`) const data = await res.json(); if (res.status === 500) { setEpisode([]); } else if (res.status === 404) { window.location.href("/404"); } else if (!data || data?.episodes?.length === 0) { setEpisode([]); } else { setEpisode(data.episodes?.reverse()); } if (session?.user?.name) { const response = await fetch("https://graphql.anilist.co/", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ query: query, variables: { username: session?.user?.name, }, }), }); const dat = await response.json(); const prog = dat.data.MediaListCollection; const gat = prog.lists.map((item) => item.entries); const git = gat.map((item) => item.find((item) => item.mediaId === parseInt(id[0])) ); const gut = git?.find((item) => item?.mediaId === parseInt(id[0])); if (gut) { setProgress(gut?.progress); if (gut.status === "CURRENT") { setStatuses({ name: "Watching", value: "CURRENT" }); } else if (gut.status === "PLANNING") { setStatuses({ name: "Plan to watch", value: "PLANNING" }); } else if (gut.status === "COMPLETED") { setStatuses({ name: "Completed", value: "COMPLETED" }); } else if (gut.status === "DROPPED") { setStatuses({ name: "Dropped", value: "DROPPED" }); } else if (gut.status === "PAUSED") { setStatuses({ name: "Paused", value: "PAUSED" }); } else if (gut.status === "REPEATING") { setStatuses({ name: "Rewatching", value: "REPEATING" }); } } } if (data.nextAiringEpisode) { setTime( convertSecondsToTime(data.nextAiringEpisode.timeUntilAiring) ); } setLoading(false); } catch (error) { console.log(error); setTimeout(() => { window.location.reload(); }, 1000); } } } fetchData(); }, [id, session?.user?.name, info]); function handleOpen() { setOpen(true); document.body.style.overflow = "hidden"; } function handleClose() { setOpen(false); document.body.style.overflow = "auto"; } return ( <> {info ? info?.title?.romaji || info?.title?.english : "Retrieving Data..."} handleClose()}>
{!session && (

Edit your list

)} {session && info && ( )}
{info ? ( banner anime ) : (
)}
{/* Mobile */}

{info?.title?.romaji || info?.title?.english}

{info?.genres ?.slice( 0, info?.genres?.length > 3 ? info?.genres?.length : 3 ) .map((item, index) => ( {item} ))}
{info && (
)}
{info && info.status !== "NOT_YET_RELEASED" ? ( <>

{info?.type}

{info?.averageScore}%

{info?.episodes ? (

{info?.episodes} Episodes

) : (

TBA

)}
) : (
{info && "Not Yet Released"}
)}
{/* PC */}
{info ? ( <>
poster anime ) : ( )}
{/* PC */}

{info ? ( info?.title?.romaji || info?.title?.english ) : ( )}

{info ? (
{info?.episodes && (
{info?.episodes} Episodes
)} {info?.startDate?.year && (
{info?.startDate?.year}
)} {info?.averageScore && (
{info?.averageScore}%
)} {info?.type && (
{info?.type}
)} {info?.status && (
{info?.status}
)}
Sub | EN
) : ( )}
{info ? (

) : ( )}

{info?.relations?.edges?.length > 0 && (
Relations
)} {info?.relations?.edges?.length > 3 && (
setShowAll(!showAll)} > {showAll ? "show less" : "show more"}
)}
{info?.relations?.edges ? ( info?.relations?.edges .slice(0, showAll ? info?.relations?.edges.length : 3) .map((r, index) => { const rel = r.node; return (
{rel.id}
{r.relationType}
{rel.title.userPreferred || rel.title.romaji}
{rel.type}
); }) ) : ( <> {[1, 2, 3].map((item) => (
))}
)}
{info && (

Episodes

)} {info?.nextAiringEpisode && (

Next :

{time}
)}
{!loading ? ( episode && (
{ episode?.length !== 0 && episode ? ( episode?.map((epi, index) => { return (

Episode {epi.number}

{epi.title && (

"{epi.title}"

)} {index !== episode?.length - 1 && ( )}
); }) ) : (

No Episodes Available

) }
) ) : (
)}
{info && rec?.length !== 0 && (
)}
); } export async function getServerSideProps(context) { const { id } = context.query; const res = await fetch("https://graphql.anilist.co/", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ query: infoQuery, variables: { id: id?.[0], }, }), }); const json = await res.json(); const data = json?.data?.Media; if (!data) { return { notFound: true, }; } const textColor = setTxtColor(data?.coverImage?.color); const color = { backgroundColor: `${data?.coverImage?.color || "#ffff"}`, color: textColor, }; return { props: { info: data, color: color, }, }; } function convertSecondsToTime(sec) { let days = Math.floor(sec / (3600 * 24)); let hours = Math.floor((sec % (3600 * 24)) / 3600); let minutes = Math.floor((sec % 3600) / 60); let time = ""; if (days > 0) { time += `${days}d `; } if (hours > 0) { time += `${hours}h `; } if (minutes > 0) { time += `${minutes}m `; } return time.trim(); } function getBrightness(hexColor) { if (!hexColor) { return 200; } const rgb = hexColor .match(/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i) .slice(1) .map((x) => parseInt(x, 16)); return (299 * rgb[0] + 587 * rgb[1] + 114 * rgb[2]) / 1000; } function setTxtColor(hexColor) { const brightness = getBrightness(hexColor); return brightness < 150 ? "#fff" : "#000"; }